<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        #mark{
            float:left;
        }
        #mark img{
            width:50px;
            height:50px;
            border-radius: 50%;
        }
        #box img{
            width: 100%;
            height:400px;
        }
        .tab_list{
            width:100%;
            height:60px;
            background-color: rosybrown;
        }
        #main{
            margin:0 auto;
            width:70%;
            height:800px;
            background-color: rgb(250, 241, 229);
        }
        #main-left,#main-right{
            /* background-color: pink; */
            float:left;
            width:500px;
            height:600px;
            margin:40px;
        }
        #main-left img{
            width:450px;
            height:450px;
        }
        #smalldog img{
            width:100px;
            height:100px;
            cursor: pointer;
        }
        #main-right button{
            margin:50px;
        }
    </style>
</head>
<body>
<div class="tab">
    <div class="tab_list">
        <div id="mark">
            <img src="img/dog.jpg" style="float:left;margin-top:5px;margin-left: 10px;" alt="">
            <p style="float:left;margin-top: 17px;font-size: 20px;margin-left: 10px;">Pet Shop</p>
        </div>
    </div>
    <div id="main">
        <div id="main-left">
<!--            <img src="img/dog.jpg" alt="" id="bigdog">-->
<!--            <div id="smalldog">-->

<!--                <img src="img/dog.jpg" alt="" onclick="ab()" id="dogone">-->
<!--                <img src="img/1.jpg" alt="" onclick="abc()" id="dogtwo">-->
<!--                <img src="img/2.jpg" alt="" onclick="abcd()" id="dogthree">-->
<!--            </div>-->
        </div>
        <div id="main-right">
            <!-- <h1>名称：电光耗子</h1>
            <h3>颜色：黄色</h3>
            <h3>介绍：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
            <h3>价格：250元</h3>
            <h3>发货地址：西安</h3> -->
        </div>
        <button onclick="ccart()">加入购物车</button>

    </div>
</div>
</body>
<script>
    var big = document.querySelector('#bigdog')
    var dogone = document.querySelector('#dogone')
    var dogtwo = document.querySelector('#dogtwo')
    var dogthree = document.querySelector('#dogthree');
    var main = document.getElementById("main-right");
    var mainleft = document.getElementById('main-left');

    var bbb;
    var strs= new Array(); //定义一数组
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4) {
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                var res = xhr.response;
                console.log(res);
                res = JSON.parse(res);
                console.log(res);
                bbb = res;
                console.log(bbb);

                strs=bbb.imagePath.split(";"); //字符分割
                // for (i=0;i<strs.length ;i++ )
                // {
                    // document.write(Fstrs[i]+"<br/>"); //分割后的字符输出
                    // console.log(strs[i]);





                mainleft.innerHTML +="<img src="+strs[0]+" id='bigdog'>"+
                    "<div id='smalldog'><img src="+strs[0]+" onclick='ab()' id='dogone'>"
                            +"<img src="+strs[1]+" onclick='abc()' id='dogone'>"
                            +"<img src="+strs[2]+" onclick='abcd()' id='dogone'></div>"
                // }
                // image = images.split(";");

                    main.innerHTML += "<h1>名称："+bbb.goodName+"</h1>"
                        +"<h3>介绍："+bbb.introduction+"</h3>"+
                        "<h3>价格：￥"+bbb.price+"</h3>"
                        +"<h3>发货地址：西安</h3>";



                // }
            } else {
                alert("request is error!!c" + xhr.status);
            }
        }
    }
    let data = window.location.search;
    // let path = "http://192.168.0.14:8080/user/petdetails"
    let path = "http://192.168.1.116:8080/user/petdetails"
    // let path = "http://192.168.0.27:8080/user/petdetails"



    xhr.open('get',path+data,true);
    xhr.send(null);

    function ab(){
        mainleft.innerHTML ='';
        mainleft.innerHTML +="<img src="+strs[0]+" id='bigdog'><div id='smalldog'>"
            +"<img src="+strs[0]+" onclick='ab()' id='dogone'>"
            +"<img src="+strs[1]+" onclick='abc()' id='dogone'>"
            +"<img src="+strs[2]+" onclick='abcd()' id='dogone'></div>"

    }
    function abc(){
        mainleft.innerHTML ='';
        mainleft.innerHTML +="<img src="+strs[1]+" id='bigdog'><div id='smalldog'>"
            +"<img src="+strs[0]+" onclick='ab()' id='dogone'>"
            +"<img src="+strs[1]+" onclick='abc()' id='dogone'>"
            +"<img src="+strs[2]+" onclick='abcd()' id='dogone'></div>"


    }
    function abcd(){
        mainleft.innerHTML ='';
        mainleft.innerHTML +="<img src="+strs[2]+" id='bigdog'><div id='smalldog'>"
            +"<img src="+strs[0]+" onclick='ab()' id='dogone'>"
            +"<img src="+strs[1]+" onclick='abc()' id='dogone'>"
            +"<img src="+strs[2]+" onclick='abcd()' id='dogone'></div>"

    }

    function ccart(){
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4) {
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    var res = xhr.response;
                    alert(res);
                    // if (res="true"){
                    //     alert("加购成功");
                    // }else{
                    //     alert("加购失败，您的宝贝已经被人捷足先登了哦")
                    // }
                } else {
                    alert("request is error!!c" + xhr.status);
                }
            }
        }
        let data = window.location.search;
        // let path = "http://192.168.0.27:8080/user/addCart"
        let path = "http://192.168.1.116:8080/user/addCart";
        // var addpath = "http://192.168.0.14:8080/user/addCart";
        xhr.open('get',addpath+data,true);
        xhr.send(null);
    }
</script>
</html>